<div>
  <div id="source-container">
    <div id="nav" ng-hide="iframed">
      <div id="navheader">
        <div class="project_name" title="{{project.description}}">{{project.name}}</div>
        <div class="dropdown"><a ng-click="project_context_menu($event)">…</a></div>
      </div>
      <div id="filelist">
        <div id="file-{{$index}}" class="fileentry"
             ng-class="{selected: file == current_file}"
             ng-repeat="file in files">
          <a ng-click="set_path(file.path)" class="filename">
            {{file.path}} <i class="icon-asterisk dirtymarker" ng-show="file.dirty"></i>
          </a>
          <a class="dropdown" ng-click="file_context_menu($event, file)">…</a>
        </div>
        <div><a class='link newthing' ng-click='prompt_new_file()'>+ new file</a></div>
      </div>
    </div>

    <form class="form-inline form-reduced-margin btn-height">
      <button ng-click='prompt_reset_project()' title='Reset {{project.name}}' class='btn pull-right'>Reset Project</button>
      <button ng-click='prompt_download_project()' title='Download {{project.name}}' class='btn  pull-right'><i class="icon-download"></i> ZIP</button>
      <span ng-hide="iframed" class="current-file-path"> {{current_file.path}}</span>
      <select ng-show="iframed" ng-model="selected_path">
        <option ng-repeat="file in files">{{file.path}}</option>
      </select>
      <span class="filestatus" ng-bind="filestatus"></span>
    </form>
    <span ng-show="file == current_file" ng-repeat="file in files">
      <div ng-hide="is_image_mime_type(file.mime_type)" class="source-code" ui-codeMirror="{onChange: create_on_change_closure(file), file: file}" ng-model="file.contents"></div>
      <img ng-show="is_image_mime_type(file.mime_type)" ng-src="{{image_url_of(file)}}">
    </span>
  </div>

<br>
<br>
  <hr ng-hide="iframed" pg-resizer="source-container">

  <div>
    <iframe class="control-iframe" ng-attr-src="{{control_url}}">
    </iframe>
    <div class="">
       If your app fails to load in the IFRAME below, try running your app in a
       <a ng-click='popout(); run("retry_popout");'>separate window</a>.
    </div>
    <div class='form-inline url-container'>
      <button ng-click='run("click")' class='btn btn-primary url-button pull-left' title='Run'><i class="icon-play icon-white"></i></button>
      <input ng-model='iframe_run_url' type='url' class='span8 url-bar' ng-click='select_me($event)'>
      <button ng-click='popout(); run("popout_button")' class='btn pull-right url-button' title='Open in a separate window'><i class="icon-share-alt"></i></button>
    </div>
    <div id="output-iframe" style="position: relative;">
      <div ng-show="!output_ready" style="position: absolute; background-color: #eee;">
        <div style="margin: 2em;">Deploying code to a Google data center...</div>
      </div>
      <div ng-hide="requested_popout" pg-visible="output_ready">
        <iframe ng-src="{{iframe_run_url}}" pg-load="output_loaded()">
        </iframe>
      </div>
    </div>

    <hr ng-hide="iframed" pg-resizer="output-iframe">
  </div>

  <div ng-hide="iframed">
    <div ng-show="logs.length">
      <a ng-click="clear_logs()" ng-show="logs.length" class="btn pull-right">clear logs</a>
      <h4>Log output</h4>
    </div>
    <div class="ae-logs">
      <div ng-repeat="entry in logs | orderBy:'created':false">
         <span class="ae-logs-timestamp">{{entry.created * 1000 | date:'yyyy-MM-dd HH:mm:ss.sss Z'}}</span>
         <span class="ae-logs-severity ae-logs-severity-{{entry.levelname}}">{{entry.levelname | limitTo:1}}</span>
         <span ng-bind="entry.message" class="ae-logs-message"></span>
      </div>
    </div>
  </div>


  <!-- hidden bits -->
  <div id="file-context-menu" class="context-menu" ng-show="showfilecontextmenu" pg-movable="file_context_menu_pos">
    <div ng-click="prompt_file_rename(current_file)"><b>Rename</b> <code>{{current_file.path}}</code></div>
    <div ng-click="prompt_delete_file(current_file)"><b>Delete</b> <code>{{current_file.path}}</code></div>
  </div>
  <div id="project-context-menu" class="context-menu" ng-show="showprojectcontextmenu" pg-movable="project_context_menu_pos">
    <div ng-click="prompt_project_rename(project)"><b>Rename</b> {{project.name}}</div>
    <div ng-click="prompt_delete_project(project)"><b>Delete</b> {{project.name}}</div>
  </div>
</div>
